<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>组件嵌套</p>
    <com1></com1>
    <hr>
    <com2></com2>
  </div>
  <template id="com1">
    <div class="com1">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          ￥{{item.price}}-{{item.name}}
        </li>
      </ul>
    </div>
  </template>
  <template id="com3">
    <div class="com3">
      <mark>我是子组件com2的子组件</mark>
      <com4></com4>
    </div>
  </template>
  <template id="com4">
    <div class="com4">
      <p>我是com3的子组件</p>
    </div>
  </template>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: '我是父组件'
      },
      components: {
        'com1': {
          template: '#com1',
          data() {
            return {
              list: [
                {name: 'apple', price: 5},
                {name: 'banana', price: 4},
                {name: 'pear', price: 3}
              ]
            }
          },
        },
        'com2': {
          template: `
            <div class="com2">
              我是另一个组件
              <com3></com3>
            </div>`,
          components: {
            // 冒号前面是组件名，冒号后面是组件的内容
            'com3': {
              template: '#com3',
              components: {
                'com4': {
                  template: '#com4'
                }
              }
            }
          }
        }
      }
    })
  </script>
</body>
</html>